<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div>
      <input type="text" class="search" placeholder="防抖" />
      <input type="text" class="search2" placeholder="节流" />
    </div>
    <script>
      // 1.获取输入框
      var search = document.querySelector(".search");

      // 2.监听输入内容,发送ajax请求
      // 2.1.定义一个监听函数
      var counter1 = 0;
      function searchChange(e) {
        counter1++;
        console.log("发送" + counter1 + "网络请求");
        // console.log(this);
        // console.log(e);
      }

      function debounce(fn, delay) {
        var timer;
        console.log("防抖");
        //===>>> 这个函数才是 input标签oninput事件 绑定的函数。事件函数 接受事件参数 e
        return function () {
          //===>> 这里的 this 就是 input标签dom
          // console.log(this);
          //===>> arguments数组中是  事件参数 e
          let _arguments = arguments;
          // console.log(arguments[0]);
          // console.log(e);
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            //==>>改变this的指向 使searchChange 函数中 使用的this 就是 input DOM
            //==>>在把事件参数 e 传递 过去
            fn.apply(this, _arguments);
          }, delay);
        };
      }

      // 绑定oninput
      search.oninput = debounce(searchChange, 1000);

      //====>>>传统直观写法
      // var timer2;
      // search.oninput = function (e) {
      //   // console.log(e.target.value);
      //   if (timer2) clearTimeout(timer2);
      //   timer2 = setTimeout(() => {
      //     console.log("发送网络请求", e.target.value);
      //   }, 1000);
      // };
    </script>

    <script>
      var search2 = document.querySelector(".search2");

      var counter2 = 0;
      function searchChange(e) {
        counter2++;
        console.log("发送" + counter2 + "网络请求");
      }

      function throttle(fn, interval) {
        var last = 0;
        console.log("节流");
        return function () {
          // this和argument
          var _this = this;
          var _arguments = arguments;

          var now = new Date().getTime();
          if (now - last > interval) {
            fn.apply(_this, _arguments);
            last = now;
          }
        };
      }
      //  1000 ms 内只能触发 searchChange 函数 一次
      search2.oninput = throttle(searchChange, 1000);
    </script>
  </body>
</html>
